<template>
  <button
    :class="className"
    :openType="openType"
    :style="{
      width: width / 2 + 'px',
      height: height / 2 + 'px',
      borderRadius: height / 2 + 'px',
      margin: 'auto',
      marginTop: marginTop + 'px',
      fontSize: fontSize ? fontSize / 2 + 'px' : ''
    }"
    @getuserinfo="getUserInfo"
    class="my-button"
  >
    <slot>我是一个按钮</slot>
  </button>
</template>

<script>
  export default {
    props: {
      width: {
        type: Number,
        default: 470
      },
      height: {
        type: Number,
        default: 88
      },
      marginTop: {
        type: Number,
        default: 10
      },
      className: {
        type: String,
        default: ""
      },
      openType: {
        type: String,
        default: ""
      },
      fontSize: {
        type: Number,
        default: 0
      }
    },
    methods: {
      getUserInfo(e) {
        this.$emit("getUserInfo", e);
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../uni";

  .my-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(
        136deg,
        rgba(255, 211, 34, 1) 0%,
        rgba(255, 186, 0, 1) 100%
    );
    box-shadow: 0 upx(28) upx(20) upx(-20) rgba(255, 209, 31, 0.7);
    border-radius: upx(37);
    color: #fff;
    font-size: upx(40);
    border: none;
    outline: none;

    &:after {
      content: none;
    }
  }
</style>
